<template>
  <div class="right_top_box">
    <div class="img_box">
      <img :src=imgSrc alt=""/>
    </div>
    <div class="info_box">
      <div class="t_r">
        <div class="t_le">姓名：</div>
        <div class="t_ri">{{ userInfo.stuname }}</div>
      </div>
      <div class="t_r">
        <div class="t_le">性别：</div>
        <div class="t_ri">{{ userInfo.gender }}</div>
      </div>
      <div class="t_r">
        <div class="t_le">专业：</div>
        <div class="t_ri">{{ userInfo.collage }}</div>
      </div>
      <div class="t_r">
        <div class="t_le">班级：</div>
        <div class="t_ri">{{ userInfo.clazz }}</div>
      </div>
      <div class="t_r">
        <div class="t_le">学号：</div>
        <div class="t_ri">{{ userInfo.stuid }}</div>
      </div>
    </div>
  </div>
</template>

<script>
// import BottomRightChart from "@/components/echart/bottom/bottomRightChart";
export default {
  props: ["userInfo", "imgSrc"],
  data() {
    return {
      info: {}
    };
  },
  mounted() {
    // setInterval(()=>{
    //   console.log(this.userInfo)
    // },3000)
  }
};
</script>

<style lang="scss">
.right_top_box {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;

  .img_box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 65%;
    width: 40%;
    //flex:4;
    img {
      height: 100%;
    }
  }

  .info_box {
    width: 60%;
    //flex:6;
    height: 65%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .t_r {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      width: 100%;

      .t_le {
        margin: 25px 1px;
        flex: 1.8;
        font-size: 25px;
        font-weight: 700;
        color: #257dff;
      }

      .t_ri {
        margin: 25px 0px;
        flex: 6;
        font-size: 25px;
        font-weight: 550;
      }
    }
  }
}

//.text {
//  color: #c3cbde;
//}
////下滑线动态
//.decoration2 {
//  position: absolute;
//  right: 0.125rem;
//}
//.chart-box {
//  margin-top: 16px;
//  width: 170px;
//  height: 170px;
//  .active-ring-name {
//    padding-top: 10px;
//  }
//}
//}
</style>